<template>
  <div class="container">
    <datetime></datetime>
    <div class="card">
      <div class="container-image">
        <img class="image-circle" src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/ning.png" />
      </div>
      <div class="content">
        <div class="detail">
          <div
            style="
              position: absolute;
              top: -10%;
              left: 50%;
              padding: 5px;
              background-color: #fff;
              border-radius: 50%;
              transform: translate(-50%, -50%);
            "
          >
            <img src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/ning.png" style="width: 125px" />
          </div>
          <loginCode @emailCode="handleEmailCode"></loginCode>
        </div>
      </div>
    </div>
    <div class="absolute right-20 top-20 text-2xl text-shadow-md text-white">{{ sc }}</div>
    <div class="absolute right-20 top-35 text-2xl text-shadow-md">{{ '——' + zz }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import loginCode from './components/loginCode.vue';
import datetime from './components/datetime.vue';
import { useUserStore } from '@/stores/userinfo';
const userStore = useUserStore();
const router = useRouter();
// userStore.loadUserInfo()
// // 在用户信息加载完成后，跳转到 home 页面
// if (userStore.id) {
//   router.push('/home')
// }
const { proxy } = getCurrentInstance();
async function handleEmailCode(code) {
  // 在这里处理接收到的邮件验证码
  console.log(code);

  const result = await proxy.$ax.get(`/5001/api/NingLiUser/GetUserByCode/${code}`);
  console.log('result.value', result);
  if (result.data == null) {
    ElMessage({
      type: 'error',
      message: `口令不正确！！`,
      duration: 5 * 1000,
    });
  } else {
    const userInfo = result.data;
    userInfo.locationData = JSON.parse(userInfo.locationData);
    userInfo.bucketList = userInfo.bucketList.split(',');
    userInfo.region = userInfo.region.split(',');
    console.log('loginuserInfo1', userInfo);
    // 更新用户信息
    userStore.updateUserInfo(userInfo);

    router.push('/home');
  }
}
const sc = ref('');
const zz = ref('');
onMounted(async () => {
  const result = await proxy.$ax.get('/5001/api/mainControllers/GetPoemAsync');
  console.log('result.value2', result);
  sc.value = result.content;
  zz.value = result.author;
});
</script>

<style scoped lang="less">
body {
  overflow: hidden;
}

.card {
  position: absolute;
  background: transparent;
  width: 300px;
  height: 300px;
  border: none;
  right: 2vw;
  bottom: 2vh;
}

.card:hover {
  width: 300px;
}

.card .container-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(231, 231, 231, 1);
  width: 190px;
  height: 190px;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 0.3s ease-in-out, opacity 0.3s;
  transition-delay: 0.6s, 0s;
}

.card:hover .container-image {
  opacity: 0;
  border-radius: 8px;
  transition-delay: 0s, 0.6s;
}

.card .container-image .image-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 155px;
  height: 155px;
  object-fit: contain;
  filter: drop-shadow(2px 2px 2px #1818188a);
  transition: all 0.3s ease-in-out;
  transition-delay: 0.4s;
}

.card:hover .container-image .image-circle {
  opacity: 0;
  transition-delay: 0s;
}

.card .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  padding: 20px;
  width: 190px;
  height: 190px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 3px 1px #fff, 2px 2px 3px #fff, inset 2px 2px 2px #000;
  visibility: hidden;
  transition: 0.3s ease-in-out;
  transition-delay: 0s;
  z-index: 1;
}

.card:hover .content {
  width: 290px;
  height: 190px;
  visibility: visible;
  transition-delay: 0.5s;
}

.card .content .detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transition-delay: 0s;
}

.card:hover .content .detail {
  color: #181818;
  opacity: 100%;
  transition: 1s;
  transition-delay: 0.3s;
}

.card .content .detail span {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 800;
}

.card .content .detail button {
  background: #b8854b;
  margin-top: auto;
  width: 75px;
  height: 25px;
  color: #ffffff;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
}

.card .content .detail button:hover {
  background: #d39f63;
}

.card .content .product-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.card .content .product-image .box-image {
  display: flex;
  position: absolute;
  top: 0;
  left: -25%;
  width: 100%;
  height: 115%;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s ease-in-out;
  transition-delay: 0s;
}

.card:hover .content .product-image .box-image {
  top: -25%;
  left: 0;
  opacity: 100%;
  transform: scale(1);
  transition-delay: 0.3s;
}

.card .content .product-image .box-image .img-product {
  margin: auto;
  width: 7rem;
  height: auto;
}

.fil-shoes1,
.fil-shoes2 {
  fill: #333333;
}
</style>
